import React from "react";

//声明类式组件
export default class StateTry extends React.Component {
  //为实例添加
  state = {
    isNight: true, //是否是晚上
    counter: 0,
  };

  //构造方法
  constructor(){
    super();
    // this 指向实例对象
    this.handleClick = this.handleClick.bind(this);
    //3. 创建一个实例的方法, 更改方法运行时 this 值
    this.handleClick2 = this.handleClick2.bind(this);
  }

  //声明一个方法  handle 处理
  handleClick() {
    console.log(this);  
    //更新 isNight 的状态值
    this.setState({
      isNight: !this.state.isNight,
    });
  }

  //2. 声明事件对应方法
  handleClick2(){
    this.setState({
      counter: this.state.counter + 1
    });
  }

  // render 方法是由『实例化对象』调用的
  render() {
    return (
      <div>
        <h1>至尊宝, 我是{this.state.isNight ? "紫霞仙子" : "青霞仙子"} </h1>
        <button onClick={this.handleClick}>切换白天与黑夜</button>
        <hr />
        <h2>{this.state.counter}</h2>
        {/* 绑定事件操作步骤 1. 添加事件属性, 指定方法名 */}
        <button onClick={this.handleClick2} > 自增 </button>
      </div>
    );
  }
}
